<template>
	<view class="page index">
		<view class="header">
			<nav-bar title="活动广场">
			</nav-bar>
		</view>
		<view class="top">
			<view class="search">
				<input type="text" placeholder="请输入活动名称" placeholder-style="color:#9B9B9B;" @blur="search">
			</view>
			<view class="nav">
				<view class="nav-item" @click="navIndex = 0;showSelect = true">
					<text class="text">{{tag == 0 ? '活动类型' : navList[0][tag - 1]}}</text>
					<uni-icons type="bottom" size="18rpx"></uni-icons>
				</view>
				<view class="nav-item" @click="navIndex = 1;showSelect = true">
					<text class="text">{{tag == 0 ? '活动范畴' : navList[1][tag - 1]}}</text>
					<uni-icons type="bottom" size="18rpx"></uni-icons>
				</view>
				<view class="nav-item" @click="navIndex = 2;showSelect = true">
					<text class="text">{{tag == 0 ? '活动状态' : navList[2][tag - 1]}}</text>
					<uni-icons type="bottom" size="18rpx"></uni-icons>
				</view>
			</view>
		</view>
		<view class="main">
			<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
				<view class="active-container">
					<view class="active-item" v-for="(item, index) in activeList" @click="toDetails(item.id)">
						<view class="left">
							<image :src="item.img" mode="aspectFill"></image>
							<view class="tag" :style="{background:item.color}">
								{{item.tagName}}
							</view>
							<view class="type">
								<text>{{item.type}}</text>
							</view>
						</view>
						<view class="right">
							<view class="title">
								{{item.name}}
							</view>
							<view class="partment">
								主办:{{item.deptName}}
							</view>
							<view class="time">
								时间:{{item.hold_time}}
							</view>
							<view class="addr">
								地点:{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<data-select :list="selectList" :show="showSelect" @showDateSelect="showDateSelect($event)" @confire="confire($event)"></data-select>
	</view>
</template>

<script>
	import dataSelect from "@/components/data-select.vue"
	import {getActiveListApi} from "@/common/api/eventPlaza_api.js"
	import {tagList} from "@/common/util/index.js"
	export default {
		data(){
			return{
				showSelect:false,
				selectList:[],
				navIndex:-1, //navList的索引
				navList:[
					['忠诚', '阳光', '美丽', '和顺'],
					['德育', '智育', '体育', '美育', '劳育'],
					['未开始', '进行中', '已结束']
				],
				activeList:[],//活动列表
				name:'',//关键字查询
				tag:0,//标签 1忠诚 2 阳光 3 美丽 4 和顺
				type:0,//类型 德智体美劳
				state:0,//0=>全部 1=>未开始 2=>进行中 2=>已结束
				pageNum:1,//页面
				total:1,//总页数
				pageSize:10,
			}
		},
		components:{
			dataSelect
		},
		watch:{
			navIndex(index){
				if(index == -1){
					return;
				}
				this.selectList = [...this.navList[index]];
			}
		},
		onLoad() {
			this.getActiveList();
		},
		methods:{
			showDateSelect(e){
				this.showSelect = e;
			},
			scrolltolower(){
				if(this.pageNum < this.total){
					this.pageNum ++;
					this.getActiveList();
				}
			},
			search(e){
				console.log(e,'=====关键字====');
				this.activeList = [];
				this.pageNum = 1;
				this.name = e.detail.value;
				this.getActiveList();
			},
			confire(e){
				console.log(e,'==========下拉======')
				switch(this.navIndex){
					case 0:{
						this.tag = e + 1;
						break;
					}
					case 1:{
						this.type = e + 1;
						break;
					}
					case 2:{
						this.state = e + 1;
						break;
					}
				};
				console.log(this.tag);
				this.activeList = [];
				this.pageNum = 1;
				this.getActiveList();
			},
			//获取活动列表
			getActiveList(){
				uni.showLoading({
					title:'加载中...'
				})
				getActiveListApi({
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					name:this.name,
					tag:this.tag,
					type:this.type,
					state:this.state
				})
				.then(async(res)=>{
					console.log(res,'===活动列表===');
					res.rows = await tagList(res.rows);
					this.activeList = [...this.activeList, ...res.rows];
					this.total = Math.ceil(res.total / this.pageSize);
					uni.hideLoading();
				})
			},
			//跳转到活动详情
			toDetails(id){
				uni.navigateTo({
					url:'/pages/event-plaza/event-detail/index?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/style/common.scss";

	.index {
		@include flex-c;

		>.header {
			flex: 0 0 auto;
		}

		>.top {
			flex: 0 0 auto;

			.search {
				width: 100%;
				padding: 28rpx 42rpx;
				background: linear-gradient(90deg, #0096FF 0%, #0069FF 100%);

				input {
					display: block;
					padding: 0 30rpx;
					box-sizing: border-box;
					height: 64rpx;
					width: 100%;
					color: #9B9B9B;
					font-size: 24rpx;
					background-color: #ffffff;
					border-radius: 38rpx;
				}
			}

			.nav {
				@include flex-r-between-start;
				padding: 20rpx 60rpx;
				border-bottom: #E6E6E6 solid 2rpx;

				.nav-item {
					@include flex-r-start-center;
					color: #656974;
					font-size: 24rpx;
					position: relative;
					.text {
						padding-right: 16rpx;
					}
					.dataSelect{
						position: absolute;
						top: 20rpx;
					}
				}
			}
		}

		>.main {
			flex: 1 0 0;
			padding: 40rpx 0 0;
			overflow: hidden;
			.scroll {
				height: 100%;

				.active-container {
					padding: 0 32rpx;
					@include active;
				}
			}
		}
	}
</style>
